<template>
  <div class="overflow-y-auto p-4 space-y-6 max-w-5xl mx-auto">
    
    <!-- 系统信息 -->
    <div class="bg-white rounded-lg p-6 shadow-sm">
      <h2 class="text-lg font-medium mb-6">
        System Info
      </h2>

      <div class="space-y-4">
        <div class="flex justify-between items-center">
          <div class="text-gray-500 min-w-0 flex-shrink-0 w-40">
            System name:
          </div>
          <div class="font-medium text-right">{{ systemInfo.systemName }}</div>
        </div>

        <div class="flex justify-between items-center">
          <div class="text-gray-500 min-w-0 flex-shrink-0 w-40">
            Country/region:
          </div>
          <div class="font-medium text-right">
            {{ systemInfo.countryRegion }}
          </div>
        </div>

        <div class="flex justify-between items-center">
          <div class="text-gray-500 min-w-0 flex-shrink-0 w-40">
            Company address:
          </div>
          <div class="font-medium text-right">
            {{ systemInfo.companyAddress }}
          </div>
        </div>

        <div class="flex justify-between items-center">
          <div class="text-gray-500 min-w-0 flex-shrink-0 w-40">
            Timezone:
          </div>
          <div class="font-medium text-right">{{ systemInfo.timezone }}</div>
        </div>
      </div>
    </div>

    <!-- 系统配置 -->
    <div class="bg-white rounded-lg p-6 shadow-sm">
      <h2 class="text-lg font-medium mb-6">
        System Configuration
      </h2>

      <div class="space-y-6">
        <div class="flex justify-between items-center">
          <div class="text-gray-500 min-w-0 flex-shrink-0 w-48">
            Grid connection standards:
          </div>
          <div class="font-medium text-right">
            {{ systemConfiguration.gridConnectionStandards }}
          </div>
        </div>

        <!-- 安全设置 -->
        <div>
          <h3 class="font-medium mb-4">
            Safety Settings
          </h3>
          <div class="ml-4 space-y-4">
            <div class="flex justify-between items-center">
              <div class="text-gray-500 min-w-0 flex-shrink-0 w-60">
                Maximum safe discharge power:
              </div>
              <div class="font-medium text-right">
                {{ systemConfiguration.maxSafeDischarge }}
              </div>
            </div>

            <div class="flex justify-between items-center">
              <div class="text-gray-500 min-w-0 flex-shrink-0 w-60">
                Maximum safe charge power:
              </div>
              <div class="font-medium text-right">
                {{ systemConfiguration.maxSafeCharge }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 用户访问 -->
    <div class="bg-white rounded-lg p-6 shadow-sm">
      <h2 class="text-lg font-medium mb-6">
        User Access
      </h2>

      <div class="space-y-8">
        <!-- 拥有者 -->
        <div>
          <h3 class="font-medium mb-4">Owner</h3>
          <div class="ml-4 space-y-4">
            <div class="flex justify-between items-center">
              <div class="text-gray-500 min-w-0 flex-shrink-0 w-48">
                Client classification:
              </div>
              <div class="font-medium text-right">
                {{ userAccess.owner.clientClassification }}
              </div>
            </div>

            <!-- Individual Client - 显示拥有者姓名和邮箱 -->
            <template v-if="
              userAccess.owner.clientClassification === 'Individual Client'
            ">
              <div class="flex justify-between items-center">
                <div class="text-gray-500 min-w-0 flex-shrink-0 w-48">
                  Owner name:
                </div>
                <div class="font-medium text-right">
                  {{ userAccess.owner.ownerName }}
                </div>
              </div>

              <div class="flex justify-between items-center">
                <div class="text-gray-500 min-w-0 flex-shrink-0 w-48">
                  Owner E-mail:
                </div>
                <div class="font-medium text-right">
                  {{ userAccess.owner.ownerEmail }}
                </div>
              </div>
            </template>

            <!-- Organization Client - 显示组织信息 -->
            <template v-else-if="
              userAccess.owner.clientClassification ===
              'Organization client (Corporate/ Institutional)'
            ">
              <div class="flex justify-between items-center">
                <div class="text-gray-500 min-w-0 flex-shrink-0 w-48">
                  Organization name:
                </div>
                <div class="font-medium text-right">
                  {{ userAccess.owner.organizationName }}
                </div>
              </div>

              <div class="flex justify-between items-center">
                <div class="text-gray-500 min-w-0 flex-shrink-0 w-48">
                  Admin name:
                </div>
                <div class="font-medium text-right">
                  {{ userAccess.owner.adminName }}
                </div>
              </div>

              <div class="flex justify-between items-center">
                <div class="text-gray-500 min-w-0 flex-shrink-0 w-48">
                  Admin E-mail:
                </div>
                <div class="font-medium text-right">
                  {{ userAccess.owner.adminEmail }}
                </div>
              </div>
            </template>

            <!-- Non-Client - 只显示客户分类，不显示其他信息 -->
          </div>
        </div>

        <!-- 安装员 - 只在非Non-Client情况下显示 -->
        <div v-if="userAccess.owner.clientClassification !== 'Non-Client'">
          <h3 class="font-medium mb-4">
            Installer
          </h3>
          <div class="ml-4 space-y-4">
            <div class="flex justify-between items-center">
              <div class="text-gray-500 min-w-0 flex-shrink-0 w-48">
                Company classification:
              </div>
              <div class="font-medium text-right">
                {{ userAccess.installer.companyClassification }}
              </div>
            </div>

            <div class="flex justify-between items-center">
              <div class="text-gray-500 min-w-0 flex-shrink-0 w-48">
                Company name:
              </div>
              <div class="font-medium text-right">
                {{ userAccess.installer.companyName }}
              </div>
            </div>

            <div class="flex justify-between items-center">
              <div class="text-gray-500 min-w-0 flex-shrink-0 w-48">
                Country/region:
              </div>
              <div class="font-medium text-right">
                {{ userAccess.installer.countryRegion }}
              </div>
            </div>

            <div class="flex justify-between items-center">
              <div class="text-gray-500 min-w-0 flex-shrink-0 w-48">
                Company address:
              </div>
              <div class="font-medium text-right">
                {{ userAccess.installer.companyAddress }}
              </div>
            </div>

            <div class="flex justify-between items-center">
              <div class="text-gray-500 min-w-0 flex-shrink-0 w-48">
                Company E-mail:
              </div>
              <div class="font-medium text-right">
                {{ userAccess.installer.companyEmail }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, inject, watchEffect } from "vue";

const props = defineProps({
  systemId: {
    type: String,
    required: true
  }
});

// 系统信息数据 - 默认显示为空，等待后端数据
const systemInfo = ref({
  systemName: "-",
  countryRegion: "-",
  companyAddress: "-",
  timezone: "-"
});

const systemConfiguration = ref({
  gridConnectionStandards: "-",
  maxSafeDischarge: "-",
  maxSafeCharge: "-"
});

// 用户访问数据 - 默认显示为空，等待后端数据
const clientType = ref("Individual Client");
const userAccess = ref({
  owner: {
    clientClassification: "Individual Client",
    ownerName: "-",
    ownerEmail: "-",
    organizationName: "-",
    adminName: "-",
    adminEmail: "-"
  },
  installer: {
    companyClassification: "Installer",
    companyName: "-",
    countryRegion: "-",
    companyAddress: "-",
    companyEmail: "-"
  }
});


// 注入父级一次性请求的数据（若父级未提供，保持静态占位不影响页面）
const installerDetail = inject<any>("installerDetail", null);

// 按接口字段映射
watchEffect(() => {
  const d = installerDetail && installerDetail.value;
  if (!d) return;

  // 基础系统信息 - 只使用后端数据，没有则显示空
  systemInfo.value = {
    systemName: d.name || d.systemName || '-',
    countryRegion: d.country || d.regionName || '-',
    companyAddress: d.address || '-',
    timezone: d.timeZone || d.timezone || '-'
  };

  // 系统配置 - 只使用后端数据，没有则显示空
  systemConfiguration.value = {
    gridConnectionStandards: d.gridStandard !== undefined && d.gridStandard !== null ? String(d.gridStandard) : '-',
    maxSafeDischarge: d.dischargeLimit !== undefined && d.dischargeLimit !== null ? `${d.dischargeLimit}W` : '-',
    maxSafeCharge: d.chargeLimit !== undefined && d.chargeLimit !== null ? `${d.chargeLimit}W` : '-'
  };

  // 用户访问信息 - 只使用后端数据，没有则显示空
  const classification = d.consumerType === 2 ? 'Installer' : 'Individual Client';
  clientType.value = classification;

  userAccess.value = {
    owner: {
      clientClassification: classification,
      ownerName: d.consumer || '-',
      ownerEmail: d.adminEmail || '-',
      organizationName: d.company || '-',
      adminName: d.adminName || '-',
      adminEmail: d.adminEmail || '-'
    },
    installer: {
      companyClassification: 'Installer',
      companyName: d.installer || '-',
      countryRegion: d.country || '-',
      companyAddress: d.address || '-',
      companyEmail: d.installerEmail || '-'
    }
  };
});
</script>
